<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .app{
        /**
          这一章,我们主要介绍border-radius属性的使用
          允许你设置元素的外边框圆角
          当然,如果任何大于50%的半径都不会在继续生效

          border可以单独指定水平半径和垂直半径,只要用 / 分隔即可
         */
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: deeppink;
        /*border-radius: 100px / 75px;*/
        /*border-radius: 50% / 50%;*/
        /*border-radius: 10px / 5px 20px;*/
        /*border-radius: 50% / 100% 100% 0 0;*/
        border-radius: 100% 0  0 0;
      }
    </style>

</head>
<body>
  <div class="app"></div>
</body>
</html>
